<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    body{
    height: 100vh;
  }

  .login{
    height: 40px;
    
  }
  .login-tips{
    float: right;
    color: red;
    font-size: 12px;
  }
  .list{
    height: calc(100vh - 102px);
    max-height: calc(100vh - 102px);
    overflow: auto;
    border: 1px solid #000000;
    margin: 10px;
  }

  .item{
    height: 20px;
    margin-top: 5px;
  }

  .footer{
    height: 40px;
  }
  </style>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <div class="login">
    <input id="name" type="text" placeholder="你叫啥呢？">
    <button id="setName">注册</button>
    <p id="loginTips" class="login-tips"></p>
  </div>
  <div class="list" id="list"></div>
  <div class="footer">
    <input id="msg" type="text" placeholder="你想对大家说点啥？">
    <button id="sendBtn">发送</button>
  </div>
</body>
<script>

  let nameDom = document.querySelector('#name');
  let setNameDom = document.querySelector('#setName');
  let msgDom = document.querySelector('#msg');
  let sendBtnDom = document.querySelector('#sendBtn');
  let list = [];

  let isLogin = false;

  setNameDom.addEventListener('click',() =>{
    let nameVal = nameDom.value;
    if(!nameVal){
      alert('让大家知道你叫什么吧');
      return;
    }

    socket.emit('self online',nameVal)
  })

  sendBtnDom.addEventListener('click',()=>{
    let msgVal = msgDom.value;
    let nameVal = nameDom.value;

    if(!nameVal){
      alert('让大家知道你叫什么吧');
      return;
    }

    if(!msgVal){
      alert('说点啥吧');
      return;
    }

    socket.emit('chat msg', {
      msg: msgVal,
      name: nameVal,
      time: new Date().getTime()
    })
    msgDom.value = ''
  })
  
  let socket = io();

  // 实时消息
  socket.on('chat msg',({msg,name,time}) =>{
    // addList(msg)
  });

  // 用户登录
   socket.on('user online',(name) =>{
    let nameVal = nameDom.value;
    if(name === nameVal){
      return;
    }
    let loginTips = document.querySelector('#loginTips');
    loginTips.innerHTML = `${name}上线了`
    setTimeout(() => {
      loginTips.innerHTML = ''
    }, 5000);
   });

  // 历史消息
  socket.on('history',(list) =>{
    console.log(list)
   });

    socket.on('isOnline',() =>{
      let nameVal = nameDom.value;
      socket.emit('isOnline',nameVal)
   });

  function addList(msg){
    let listDom = document.querySelector('#list');
    let itemDom = document.createElement('p');
    itemDom.className = 'item'
      itemDom.innerHTML = msg
      listDom.appendChild(itemDom)
  }
 
</script>
</html>
